import {ActivityIndicator, FlatList, Platform, View, ScrollView} from 'react-native';
import React from 'react';
import PropTypes from 'prop-types';
import SmartRefreshHeader from "./UltimateListView/SmartRefreshHeader";
import RefreshableScrollView from './UltimateListView/refreshableScrollView';
export default class StaticListPage extends React.PureComponent {
    constructor(props) {
        super(props);
        console.log('StaticListPage: constructor');
        this.state = {data: [], loading: true, refreshing: false, height: 0, width:0};
    }

    componentDidMount() {
        console.log('StaticListPage: componentDidMount');
        const {fetchData} = this.props;
        if (fetchData) {
            fetchData(true, (data) => {
                this.setState({data, loading: false});
            });
        }
    }

    onRefresh = () => {
        const {fetchData} = this.props;
        if (fetchData) {
            this.setState({refreshing: true});
            fetchData(false, (data) => {
                this.rc && this.rc.finishRefresh();
                console.log('this.flatList:', this);
                if (this.flatList && this.flatList._listRef._scrollRef.onRefreshEnd) {
                    this.flatList._listRef._scrollRef.onRefreshEnd();
                }
                this.setState({data, refreshing: false});
            });
        }
    };

    refresh() {
        this.onRefresh();
    }

    silentRefresh() {
        const {fetchData} = this.props;
        if (fetchData) {
            //this.setState({refreshing: false});
            fetchData(false, (data) => {
                this.setState({data, refreshing: false});
            });
        }
    }

    forceUpdateList() {
        this.setState({data: this.state.data.slice()});
    }

    getDataCopy() {
        return this.state.data.slice();
    }

    scrollToIndex(params) {
        this.flatList && this.flatList.scrollToIndex(params);
    }

    emptyView = () => {
        return <View style={{height: this.state.height, width: this.state.width, alignItems:'stretch'}}>
            {this.props.emptyView ? this.props.emptyView() : null}
        </View>;
    };

    render() {
        const style = {flex: 1, justifyContent: 'center', alignSelf: 'stretch'};
        if (this.props.refreshableMode === 'advanced') {
            style.zIndex = -1;
        }
        return <View style={style}>
            {this.state.loading ? <ActivityIndicator color={this.props.tintColor} size={'large'}/> :
                <FlatList data={this.state.data}
                          ref={v=>this.flatList=v}
                          renderScrollComponent={Platform.OS === 'ios' && this.props.refreshableMode === 'advanced'?this.renderScrollComponent:null}
                          keyExtractor={(item, index) => {return `${index}`}}
                          onLayout={(event) => this.setState({height: event.nativeEvent.layout.height, width: event.nativeEvent.layout.width})}
                          onRefresh={this.props.refreshable ? this.onRefresh : null}
                          refreshing={this.state.refreshing}
                          ref={ref => this.scrollView = ref}
                          refreshControl={Platform.OS === 'android' && this.props.refreshableMode === 'advanced' ? <SmartRefreshHeader
                              onRefresh={this.onRefresh}
                              ref={ref => this.rc = ref}
                              progressViewOffset={this.props.contentContainerStyle ? this.props.contentContainerStyle.paddingTop : 0}
                          /> : null}
                          ListEmptyComponent={this.emptyView}
                          onScrollToIndexFailed={()=>{}}
                          extra={this.state.data} {...this.props}
                          ref={v=>this.flatList=v}
                />}
        </View>;
    }
    renderScrollComponent = (props) => {
        if (this.props.refreshable) {
            return <RefreshableScrollView
                {...props}
                insideOfUltimateListView
                onRefresh={this.onRefresh}
                ref={ref => this.scrollView = ref}
            />;
        }
        return <ScrollView
            {...props}
            ref={ref => this.scrollView = ref}
        />;
    }
}
StaticListPage.propTypes = {
    fetchData: PropTypes.func,
    emptyView: PropTypes.func,
    renderItem: PropTypes.func,
    refreshable: PropTypes.boolean,
    tintColor: PropTypes.string,
    refreshableMode: PropTypes.string
};
StaticListPage.defaultProps = {
    refreshable: true,
    tintColor: '#2992E3',
    refreshableMode: 'advanced'
};
